<template>
  <div>
    <div class="navbar">
      <van-nav-bar @click-left="onClickLeft" left-text="返回"
        left-arrow title="类别列表"></van-nav-bar>
    </div>
    <div>
      <van-row>
        <van-col span="6">
          <div class="left-nav" id="leftNav">
            <ul>
              <li @click="changeIndex(index,item.ID)" :class="{active:categoryIndex==index}" v-for="(item,index) in category" :key="index">
                {{item.MALL_CATEGORY_NAME}}
              </li>
            </ul>
          </div>
          
        </van-col>
        <van-col span="18">
          <div class="tabCategorySub">
            <van-tabs v-model="active" @click="onClickCategorySub" :swipe-threshold="3">
              <van-tab v-for="(item,index) in categorySub" :key="index" :title="item.MALL_SUB_NAME">
                  
              </van-tab>
            </van-tabs>
          </div>
          <div id="list">
            <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
              <van-list swipeable v-model="loading" :finished="finished" @load="pullLoad">
                <div class="list-item" @click="goGoodsInfo(item.ID)" v-for="(item,index) in goodList" :key="index">
                  <div class="list-item-img">
                    <img :src="item.IMAGE1" @error="errorImg" width="100%" alt="">
                  </div>
                  <div class="list-item-text">
                    <div>{{item.NAME}}</div>
                    <span>价格: </span><span class='price'>￥{{item.ORI_PRICE | moneyFilter}}</span>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
            
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {Toast} from 'vant'
import {toMoney} from '@/filter/moneyFilter.js'
import {URL} from '@/servicesApi.config.js'
export default {
  created(){
    this.getCategory();
  },
  mounted() {
    let winHeight = document.documentElement.clientHeight
    document.getElementById('leftNav').style.height=winHeight-46 +'px'
    document.getElementById('list').style.height=winHeight-90 +'px'
  },
  updated() {
    if(this.finished==true){
      let winHeight = document.documentElement.clientHeight
      let olist = document.getElementById('list')
      let timer = false;
      olist.onscroll=function(){
        clearTimeout(timer);
        timer = setTimeout(() => {
            if((olist.scrollHeight-olist.scrollTop+90)==winHeight){
            const toast = Toast({
              duration: 500,       // 持续展示 toast
              forbidClick: true, // 禁用背景点击
              message: '已经到底咯'
            });
          }
        }, 300);  
      }
    }
  },
  data() {
    return {
      category:[],
      categoryIndex:0,
      categorySub:[], //小类类别
      active:0,
      loading:false,
      finished:false,  //上拉加载是否有数据
      page:1, //商品列表页数
      goodList:[],  //商品列表信息
      categorySubId:'',  //商品子类ID
      isRefresh:false,
      // errorImg:'this.src="'+require('@/assets/images/error.jpg')
    }
  },
  filters:{
    moneyFilter(money){
      return toMoney(money)
    }
  },
  methods: {
    getCategory(){
      axios({
        url:URL.getCategoryList,
        method:'get'
      })
      .then(response=>{
        if(response.data.code==200 && response.data.message){
          this.category = response.data.message.slice(1)
          this.getCategorySubByCategoryID(this.category[0].ID)
        }else{
          Toast('服务器错误')
        }
      })
      .catch(error=>{
        console.log(error)
      })
    },
    errorImg(a){
      a.target.src=require('@/assets/images/error.jpg')
    },
    changeIndex(index,categoryId){
      this.categoryIndex=index;
      this.page = 1
      this.finished = false
      this.goodList=[]
      this.getCategorySubByCategoryID(categoryId)
      // console.log(index)
    },
    getCategorySubByCategoryID(categoryId){
      axios({
        url:URL.getCategorySubList,
        method:'post',
        data:{categoryId:categoryId}
      }).then(response=>{
        if(response.data.code==200&&response.data.message){
          this.categorySub=response.data.message
          this.active = 0
          this.categorySubId = this.categorySub[0].ID
          this.pullLoad()
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    onClickLeft(){
      this.$router.push('main')
    },
    //上拉加载方法
    pullLoad(){
      setTimeout(()=>{
        this.categorySubId=this.categorySubId?this.categorySubId:this.categorySub[0].ID
        this.getGoodList()
      },150)
    },
    //下拉刷新
    onRefresh(){
      setTimeout(() => {
        this.isRefresh=false
        this.finished=false
        this.list=[]
        this.pullLoad()
      }, 500);
    },
    getGoodList(){
      axios({
        url:URL.getGoodsListByCategorySubID,
        method:'post',
        data:{
          categorySubId:this.categorySubId,
          page:this.page
        }
      }).then(response=>{
        if(response.data.code==200&&response.data.message.length){
            console.log('测试'+response.data.message.length)
            this.page++
            this.goodList=this.goodList.concat(response.data.message)
            
          }else{
            this.finished = true
          }
        this.loading = false
      })
      .catch(error=>{
        console.log(error)
      })
    },
    onClickCategorySub(index,title){
      this.categorySubId = this.categorySub[index].ID
      console.log(this.categorySubId)
      this.goodList = []
      this.finished = false
      this.page = 1
      this.pullLoad()
    },
    goGoodsInfo(id){
      this.$router.push({name:'Goods',params:{goodsId:id}})
    }
  },
  components: {

  }
}
</script>

<style lang="scss" scoped>
  .left-nav{
    background-color: aliceblue;
    li{
      line-height: 38px;
      border-bottom: 1px solid #ddd;
      padding:3px;
      font-size: .8rem;
      text-align: center;
      &:last-child{
        border:none;
      }
    }
  }
  .active{
    background-color: #fff;
  }
  .tabCategorySub /deep/ .van-tabs{
    justify-content: space-between;
  } 
  .tabCategorySub /deep/ .van-tab{
    flex:0 1 33%;
    min-width: 30%;
  } 
  #list{
    overflow: scroll;
    margin-bottom: 3rem;
  }
  .list-item{
    text-align: center;
    line-height:2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    padding: 5px;
    font-size: 14px;
    .list-item-img{
      flex: 8
    }
    .list-item-text{
      flex:16;
      line-height: 1rem;
      font-size:.8rem;
      padding:5px;
      margin:3px 0 0 10px;
    }
    span.price{
      color: coral;
      line-height: 300%;
    }
  }
  


</style>
